<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商列表</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>

    <style type="text/css">
        .hr-line-dashed {
            margin: 10px 0;
            height: 1px;
            border-top: 1px dashed #e7eaec;
            background-color: #fff;
            color: #fff;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight tooltip-demo">
    <!--list-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins m-b-none">
                <div class="ibox-content p-xxs no-top-border">
                    <div style="width: 100%; padding: 20px 20px 0  0;text-align: right">
                        <button class="btn-success" onclick="areaHandler.editModalShow('','','')">添加专区</button>
                    </div>
                    <div class="panel-body table-responsive">
                        <table class="table table-bordered table-hover table-center">
                            <thead>
                            <tr>
                                <th>专区ID</th>
                                <th>名称</th>
                                <th>图片</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr th:each="item:${areas}">
                                <td th:text="${item.id}"></td>
                                <td th:text="${item.title}"></td>
                                <td>
                                    <img width="200"
                                         th:src="${'https://resource.s.ahjcwh.com/miniProgram/static/activity/'+item.id+'.png'}"
                                         alt=""/>
                                </td>
                                <td th:text="${item.desc}"></td>
                                <td th:text="${#temporals.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                <td>
                                    <a th:href="|javascript:areaHandler.editModalShow(${item.id},'${item.title}','${item.desc}')|"
                                       href="javascript:areaHandler.editModalShow(1,'','')">编辑</a>
                                    |
                                    <a th:href="|javascript:areaHandler.uploadBg(${item.id})|"
                                       href="javascript:areaHandler.uploadBg(1)">上传图片</a>

                                    <input class="file" type="file" th:id="${'file'+item.id}"
                                           th:attr="data-id=${item.id}" name="img"
                                           style="display: none;"
                                           accept="image/*"/>
                                    |
                                    <a href="javascript:areaHandler.showProducts(1,'')"
                                       th:href="|javascript:areaHandler.showProducts(${item.id},'${item.title}')|">查看商品</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="edit_modal">
    <div class="form-horizontal" style="width: 500px;">
        <input type="hidden" id="edit_id"/>
        <div class="form-group ">
            <label class="col-sm-3 control-label">标题:</label>

            <div class="col-sm-7">
                <input id="edit_title" type="text" class="form-control input-sm"
                       placeholder="标题"/>
            </div>
        </div>
        <div class="hr-line-dashed "></div>
        <div class="form-group form-inline">
            <label class="col-sm-3 control-label">描述:</label>
            <div class="col-sm-7">
            <textarea placeholder="描述" name="edit_desc" id="edit_desc" class="form-control"
                      rows="5" style="height: 56px;width: 100%"></textarea>
            </div>
        </div>
    </div>
</script>


<script type="text/html" id="upload_modal">
    <div class="form-horizontal" style="width: 500px;">
        <input type="hidden" id="upload_id"/>
        <div class="form-group ">
            <label class="col-sm-3 control-label">标题:</label>

            <div class="col-sm-7">
                <input id="edit_title" type="text" class="form-control input-sm"
                       placeholder="标题"/>
            </div>
        </div>
    </div>
</script>


<!--基础框架js-->
<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>
<script src="../../resource/hotui/js/plugins/ajaxfileupload.js"
        th:src="@{/resource/hotui/js/plugins/ajaxfileupload.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const uploadUri = /*[[@{/resource/upload}]]*/  "";
    const apiUri = /*[[@{/specialArea}]]*/  "";
</script>

<script type="text/javascript">
    var editModal = $("#edit_modal").modal("专区编辑", function () {
        let id = $("#edit_id").val();
        let title = $.trim($("#edit_title").val());
        let desc = $.trim($("#edit_desc").val());
        if (title.length === 0) {
            hot.tip.msg("请输入标题");
            return;
        }
        hot.ajax(apiUri + "/edit", {
            areaId: id,
            title: title,
            desc: desc
        }, function (apiResult) {
            if (apiResult.resultCode === 2000) {
                hot.tip.success("保存成功", function () {
                    window.location.reload();
                });
            } else {
                hot.tip.error("保存失败--" + apiResult.resultMsg);
            }
        }, function () {
        }, "post", 300);
    });

    var areaHandler = {
        editModalShow: function (id, title, desc) {
            editModal.show(function () {
                $("#edit_id").val(id);
                $("#edit_title").val(title);
                $("#edit_desc").val(desc);
            });
        },
        showProducts: function (id, title) {
            let uri = apiUri + "/products?areaId=" + id;
            hot.newTab(uri, title);
        },
        uploadBg(id) {
            $('#file' + id).click();
        }
    }

    $(function () {
        $(".file").change(function () {
            // let $view = $($(this).attr('view-element'));
            // let $val = $($(this).attr('val-element'));
            let data = {
                customPath: 'miniProgram/static/activity/' + $(this).attr('data-id') + ".png"
            }
            hot.fileUpload(uploadUri, $(this).attr('id'), data, function (apiResult) {
                window.location.reload();
            });
        });
    })

</script>
</body>
</html>
